/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-notify {
	position: fixed;
	width: var(--pure-notify-width, 100%);
	height: var(--pure-notify-height);
	padding: var(--pure-notify-padding, 14px 16px);
	margin: var(--pure-notify-margin);
	background: var(--pure-notify-background, var(--pure-notify-theme, var(--pure-theme-primary)));
	opacity: 0;
	z-index: -100;
	left: 50%;
	transform: translate(-50%, -100%);
	animation-duration: var(--pure-notify-animation-duration, 250ms);
	animation-timing-function: var(--pure-notify-animation-timing-function, ease-in-out);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	text-align: var(--pure-notify-text-align, center);

	&--theme {
		color: var(--pure-notify-color, var(--pure-text-color-invert));
	}

	&--top {
		top: var(--pure-notify-top, 0);
		bottom: auto;
		transform-origin: top center;
		transform: translate(-50%, -100%);
	}

	&--bottom {
		top: auto;
		bottom: var(--pure-notify-bottom, 0);
		transform-origin: bottom center;
		transform: translate(-50%, 100%);
	}

	&--enter-top {
		animation-name: PureNotifyEnterTop;
	}

	&--leave-top {
		animation-name: PureNotifyLeaveTop;
	}

	&--enter-bottom {
		animation-name: PureNotifyEnterBottom;
	}

	&--leave-bottom {
		animation-name: PureNotifyLeaveBottom;
	}

	@keyframes PureNotifyEnterTop {
		100% {
			transform: translate(-50%, 0);
			opacity: 1;
			z-index: var(--pure-notify-z-index, var(--pure-z-index-upper));
		}
	}

	@keyframes PureNotifyLeaveTop {
		0% {
			transform: translate(-50%, 0);
			opacity: 1;
			z-index: var(--pure-notify-z-index, var(--pure-z-index-upper));
		}

		100% {
			transform: translate(-50%, -100%);
			opacity: 0;
			z-index: -100;
		}
	}

	@keyframes PureNotifyEnterBottom {
		100% {
			transform: translate(-50%, 0);
			opacity: 1;
			z-index: var(--pure-notify-z-index, var(--pure-z-index-upper));
		}
	}

	@keyframes PureNotifyLeaveBottom {
		0% {
			transform: translate(-50%, 0);
			opacity: 1;
			z-index: var(--pure-notify-z-index, var(--pure-z-index-upper));
		}

		100% {
			transform: translate(-50%, 100%);
			opacity: 0;
			z-index: -100;
		}
	}
}
